<template v-loading="loading">
  <div ref="transformscale">
    <div class="fangdasuo">
      <!-- <span class="demonstration">放大缩小</span> -->
      <el-slider
        v-model="bingSmall"
        :format-tooltip="formatTooltip"
      ></el-slider>
    </div>
    <div :style="{ 'transform': formscale }" class="transformOrigin" id="transformOrigin" ref="transformOrigin">
      <div
        class="lookview"
        id="lookview"
        ref="lookview"
      >
        <div class="totoalheader">
          <ul>
            <router-link to="/dealtwith/index/"><li>工作台</li></router-link>
            <a v-if="dwmc == '公司本部' ? true : false" href="https://app.ehv.csg.cn:40000/dash/integration/6?rid=10318&hideLoading=true"><li>公司看板</li></a>
            <a v-if="dwmc != '公司本部' ? true : false" href="https://app.ehv.csg.cn:40000/dash/integration/6?rid=10883&hideLoading=true "><li>单位看板</li></a>
            <!-- <router-link v-if="dwmc != '公司本部' ? true : false" to="/analysis/dept-main"><li>数据看板</li></router-link> -->
            <router-link to="/dealtwith/companySystemRating/"><li>公司体系评级</li></router-link>
            <!-- <router-link v-if="department_name == '超高压输电公司/公司本部/安全监管部（应急指挥中心）'" to="/dealtwith/companySystemRating/"><li>公司体系评级</li></router-link> -->
          </ul>
        </div>
        <div class="titleData">
          <el-select
            :disabled="datadisabled"
            @change="chickbumen"
            v-model="choseque"
            style="width: 140px; display: inline-block"
            placeholder="请选择单位"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-model="statrEndtime"
            @change="dateChangebirthday1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="margin-top: 10px; display: block; width: 250px"
          >
          </el-date-picker>
        </div>
        <div class="topbingTitle">超高压输电公司安全生产问题大数据平台</div>
        <div class="viewzylb borderBk">
          <zylbscreen ref="zylbscreen"></zylbscreen
          ><!-- 专业类别 -->
        </div>
        <div class="viewglhj borderBk">
          <!-- <h6 class="wentiKantitle">管理环节</h6> -->
          <glhjscreen ref="glhjscreen"></glhjscreen
          ><!-- 管理环节 -->
        </div>
        <!-- <div class="viewslwt borderBk">
          <h6 class="wentiKantitle">三老问题</h6>
          <slwtscreen ref="slwtscreen"></slwtscreen>
        </div> -->
        <div class="viewsscm borderBk">
          <!-- <h6 class="wentiKantitle">所属层面</h6> -->
          <sscmscreen ref="sscmscreen"></sscmscreen
          ><!-- 所属层面 -->
        </div>
        <div class="viewzgwthj borderBk">
          <!-- <h6 class="wentiKantitle">整改问题环节</h6> -->
          <zgwthjscreen ref="zgwthjscreen"></zgwthjscreen
          ><!-- 整改问题环节 -->
        </div>  
        <div class="viewwtlb borderBk">
          <wtlbscreen ref="wtlbscreen"></wtlbscreen
          ><!-- 问题类别 -->
        </div>
        <div class="viewcenter">
          <!-- <h6 class="wentiKantitle">中间整改</h6> -->
          <centerscreen ref="centerscreen"></centerscreen>
          <!-- 中间整改 -->
        </div>
        <div class="viewwtyzcd borderBk">
          <!-- <h6 class="wentiKantitle">问题严重程度</h6> -->
          <wtyzcdlbscreen ref="wtyzcdlbscreen"></wtyzcdlbscreen
          ><!-- 问题严重程度 -->
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { Loading } from "element-ui";
import {
  kanbancent,
  echartssletct,
  echartssletctdw,
  tijiaoBase,
  tijiaoBasedw,
} from "../../api/regsport";
import glhjscreen from "./chartType/glhjscreen";
import zylbscreen from "./chartType/zylbscreen";
import slwtscreen from "./chartType/slwtscreen";
import sscmscreen from "./chartType/sscmscreen";
import zgwthjscreen from "./chartType/zgwthjscreen";
import wtyzcdlbscreen from "./chartType/wtyzcdlbscreen";
import wtlbscreen from "./chartType/wtlbscreen";
import centerscreen from "./chartType/centerscreen";
export default {
  name: "App",
  data() {
    return {
      startdateTime:'',//或缺当年起始月份
      updateTime:'',//或取当天日期
      loading: false, //加载
     // statrEndtime: [new Date(2020, 0, 1), new Date(2020, 11, 1)], //插件选择时间
      statrEndtime: '', //插件选择时间
      creattime: "", //开始时间
      endtime: "", //截止时间
      choseque: "公司本部", //选中部门
      dwmc:'',
      screenWidth: document.body.clientWidth,
      // screenWidth: {
      //   width: 1480 + "px",
      // },
      // screenHeight: {
      //   height: 950 + "px",
      // },
      // screenWidth: {
      //   width: document.body.clientWidth + "px",
      // },
      // screenHeight: {
      //   height: document.body.clientHeight + 150 + "px",
      // },
      WidthHeight: "", //屏幕宽高
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      options: [
        {
          value: "广州局",
          label: "广州局",
        },
        {
          value: "贵阳局",
          label: "贵阳局",
        },
        {
          value: "昆明局",
          label: "昆明局",
        },
        {
          value: "南宁局",
          label: "南宁局",
        },
        {
          value: "柳州局",
          label: "柳州局",
        },
        {
          value: "天生桥局",
          label: "天生桥局",
        },
        {
          value: "梧州局",
          label: "梧州局",
        },
        {
          value: "百色局",
          label: "百色局",
        },
        {
          value: "曲靖局",
          label: "曲靖局",
        },
        {
          value: "大理局",
          label: "大理局",
        },
        {
          value: "南宁监控中心",
          label: "南宁监控中心",
        },
        {
          value: "检修试验中心",
          label: "检修试验中心",
        },
        {
          value: "公司本部",
          label: "公司本部",
        },
      ],
      disabled: true, //导出点击状态显示隐藏
      datadisabled: true, //时间状态显示隐藏
      loading: false, //加载
      choseTime: "", //获取时间值
      chearZong: {},
      shujuYuan: [], //获取全部数据
      allBase: [], //bsee64
      department_name: "", ///获取当前部门
      charwtFxfs: [], //问题发现方式的情况
      charwtDwdfbqk: [], //问题单位的分布情况
      charwtwtzylbdfbqk: [], //问题专业类别的分布情况
      charwtwtywsxdfbqk: [], //问题业务事项的分布情况
      charwtwtsscmdfbqk: [], //问题所属层面的分布情况
      charwtwtglhjdfbqk: [], //问题管理环节的分布情况
      charwtwtlbdfbqk: [], //问题类别的分布情况
      charwtwtdytxdydfbqk: [], //问题对应体系单元的分布情况
      charwtwtdytxysdfbqk: [], //问题对应体系要素的分布情况
      charwtwtyzcddfbqk: [], //问题严重程度的分布情况
      charwtgsslwtdfbqk: [], //公司三老问题的分布情况
      charwtdwslwtdfbqk: [], //各单位三老问题的分布情况
      charwtwtyzcdlb: [], //公司问题主动暴露的分布情况
      charwtdwwtzdbldfbqk: [], //各单位问题主动暴露的分布情况
      charwtgswtzgqk: [], //公司问题整改情况
      charwtgdwwtzgqk: [], //各单位问题整改情况
      myImg: "../../assets/img/kanbj.png", // 一张可访问的图片路径
      imgInfo: {}, // 存图片的宽高信息
      setting: {
        title: "",
        keywords: "",
        description: "",
      },
      bingSmall: 50,
      formscale: 0, //初始放大
    };
  },
  // metaInfo: {
  //   title: "超高压输电公司安全生产问题大数据平台",
  //   meta: [
  //     { name: "Cache-Control", content: "max-age=7200" },
  //     { name: "x-dns-prefetch-control", content: "on" },
  //     { name: "X-UA-Compatible", content: "IE=edge,chrome=1" },
  //     { name: "renderer", content: "webkit" },
  //     { name: "apple-mobile-web-app-capable", content: "yes" },
  //     { name: "apple-mobile-web-app-status-bar-style", content: "black" },
  //     { name: "format-detection", content: "telephone=no" },
  //   ],
  // },
  created() {
    // this.changerem();
   //----------------------------------------
            //企业微信待办跳转
    // 获取当前页面地址，如http://localhost:8080/admin/index
    let wPath = window.document.location.href;
    console.log(wPath)
    //let wPath = 'http://twentyfive.365kaifa.com:888/?flag=1&code=AYOTgKZgFiEoDaqs3fDThzht7sckldR38ZKIw-HGGgE&state=STATE#';
    //截取符号前面部分
    var data1 = this.getCaption(wPath,0)
    console.log(data1)
    //截取符号后面部分
    var data2 = this.getCaption(wPath,1)
    console.log(data2)
    var shortname = data2.substring(0,6)
    console.log(shortname)
    if(shortname == 'flag=1'){
      this.$router.push({path: '/dealtwith/index'})
    }
    //----------------------------------------

    this.addDate()
    this.statrEndtime = [this.startdateTime, this.updateTime]
    this.creattime = this.statrEndtime[0];
    this.endtime = this.statrEndtime[1]
    console.log(this.statrEndtime)
    //获取当前人用户部门
    if (!this.$store.state.authInfo.user.rectify[0].department_path) {
      this.department_name =
        this.$store.state.authInfo.user.roles.corp.assess_dept[0].department_name; //测试环境
    } else {
      this.department_name =
        this.$store.state.authInfo.user.rectify[0].department_path; //企业微信
        if(this.department_name.split("/")[1] == undefined){
          this.choseque = '公司本部'
        }else{
          this.choseque = this.department_name.split("/")[1]
        }
        console.log(this.department_name)
    }
      this.dwmc = this.department_name.split("/")[1]
      console.log(this.dwmc)
    if(this.choseque == '公司本部'){
      //this.dwmc = ''
      this.datadisabled = false;
      this.InitialCompany()
    }else{
      this.datadisabled = true;
      this.InitialUnit()
    }


    // kanbancent() //请求临时列表数据
    //   .then((res) => {
    //     console.log(res);
    //     this.$refs.centerscreen.loadEchart(res); //中间看板
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });








  },
  mounted() {
    const that = this
    window.onresize = () => {
        return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
        })()
    }
  },
  methods: {
    getCaption(obj,state) {
      var index=obj.lastIndexOf("\?");
      if(state==0){
          obj=obj.substring(0,index);
      }else {
          obj=obj.substring(index+1,obj.length);
      }
      return obj;
    },
    //自适应
    ScreenAdaptation(){

      let echartsWidth = 1480
      let echartsHeight = 950   
      let windowWidth = this.screenWidth		// 窗口可视宽度
      let windowHeight = document.body.clientHeight;	// 窗口可视高度
      let subjian = windowWidth/echartsWidth
      let num = Math.round(subjian*100)/100
      console.log(num)
      this.formscale = `scale(${num})`	// 调整宽度为原来的x倍，高度不变
      console.log(echartsWidth,echartsHeight,windowWidth,windowHeight)
    },
    //获取当前年月日
    addDate(){    

      const nowDate = new Date();
      const date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
      }
      const newmonth = date.month>=10?date.month:'0'+date.month
      const day = date.date>10?date.date:'0'+date.date
      this.startdateTime = date.year + '-01-01' 
      this.updateTime = date.year + '-' + newmonth + '-' + day
      console.log(this.startdateTime)
    },
    //滑块
    formatTooltip(val) {
      var huanTotal = val / 100;
      if (huanTotal > 0.5) {
        var suojian = 1 + (huanTotal - 0.5);
        this.formscale = "scale(" + suojian + ")";
      } else {
        var suojian = 1 - (0.5 - huanTotal);
        this.formscale = "scale(" + suojian + ")";
      }
     },
   
    //获取部门
    chickbumen() {
      console.log(this.choseque);
      var department_name = this.department_name.split("/");
      console.log(department_name);

      // if (
      //   department_name[1] == this.choseque ||
      //   this.department_name == "超高压输电公司" ||
      //   department_name[1] == "公司本部"
      // ) {
      //   this.statrEndtime = "";
      //   this.datadisabled = false;
      // } else {
      //   this.$message({
      //     type: "error",
      //     message: "暂无权限，请选择您所属的单位！",
      //   });
      //   this.datadisabled = true;
      // }
      this.PublicJudgment()
    },
    //获取时间
    dateChangebirthday1(val) {
      let loadingInstance = Loading.service({ fullscreen: true });
      this.startTime = val;

      this.creattime = this.getTime(this.startTime[0]);
      this.endtime = this.getTime(this.startTime[1]);
      console.log(this.creattime);
      console.log(this.endtime);

      this.PublicJudgment()
    },
    PublicJudgment(){
      var choseque = this.choseque; //选择部门名称
      console.log(choseque);
      if (choseque == "公司本部") {
        this.InitialCompany()
      } else {
        this.InitialUnit()
      }
      if (this.choseque && this.creattime && this.endtime) {
        this.disabled = false;
      }
    },
    //初始公司数据
    InitialCompany(){
      let loadingInstance = Loading.service({ fullscreen: true });
      echartssletct({ creattime: this.creattime, endtime: this.endtime }) //请求临时列表数据
        .then((res) => {
          this.$nextTick(() => {
            // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
            // this.statrEndtime = ''
            // this.choseque = ''
            //this.datadisabled = true;
          });
          console.log(res);
          if (res.data.retCode == "400") {
            this.startExecution(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      kanbancent({ creattime: this.creattime, endtime: this.endtime }) //请求临时列表数据
      .then((res) => {
        console.log(res);
        this.$refs.centerscreen.loadEchart(res); //中间看板
      })
      .catch((err) => {
        console.log(err);
      });
    },
    //初始单位数据
    InitialUnit(){
      let loadingInstance = Loading.service({ fullscreen: true });
      echartssletctdw({
        creattime: this.creattime,
        endtime: this.endtime,
        dwmc: this.choseque,
      }) //请求临时列表数据
        .then((res) => {
          this.$nextTick(() => {
            // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
            // this.statrEndtime = '' 
            // this.choseque = ''
            //this.datadisabled = true;
          });
          console.log(res);
          if (res.data.retCode == "400") {
            this.startExecution(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      kanbancent({ creattime: this.creattime, endtime: this.endtime }) //请求临时列表数据
      .then((res) => {
        console.log(res);
        this.$refs.centerscreen.loadEchart(res); //中间看板
      })
      .catch((err) => {
        console.log(err);
      });
    },
    //执行数据
    startExecution(res) {
      this.ScreenAdaptation()
      console.log(res);
      this.shujuYuan = res.data.retData;
      this.charwtFxfs = res.data.retData.wtfxfslb; //问题发现方式情况
      this.charwtDwdfbqk = res.data.retData.wtdwfblb; //问题单位的分布情况
      this.charwtwtzylbdfbqk = res.data.retData.wtzylb; //问题专业类别的分布情况
      this.charwtwtywsxdfbqk = res.data.retData.wtywsxlb; //问题业务事项的分布情况
      this.charwtwtsscmdfbqk = res.data.retData.wtsscmlb; //问题所属层面的分布情况
      this.charwtwtglhjdfbqk = res.data.retData.wtglhjlb; //问题管理环节的分布情况
      this.charwtwtlbdfbqk = res.data.retData.wtlblb; //问题类别的分布情况
      this.charwtwtdytxdydfbqk = res.data.retData.wtdytxdylb; //问题对应体系单元的分布情况
      this.charwtwtdytxysdfbqk = res.data.retData.wtdytxyslb; //问题对应体系要素的分布情况
      this.charwtwtyzcddfbqk = res.data.retData.wtyzcdlb; //问题严重程度的分布情况
      this.charwtgsslwtdfbqk = res.data.retData.sfslwt1; //公司三老问题的分布情况
      this.charwtdwslwtdfbqk = res.data.retData.sfslwt2; //各单位三老问题的分布情况
      this.charwtwtyzcdlb = res.data.retData.wtyzcdlb; //公司问题主动暴露的分布情况
      this.charwtdwwtzdbldfbqk = res.data.retData.sfzdbl2; //各单位问题主动暴露的分布情况
      this.charwtgswtzgqk = res.data.retData.wtzgz; //公司问题整改情况
      this.charwtgdwwtzgqk = res.data.retData.wtzgdw; //各单位问题整改情况
      // // // // // // // // //
      this.$refs.zylbscreen.loadEchart(this.charwtwtzylbdfbqk); //专业类别
      this.$refs.glhjscreen.loadEchart(this.charwtwtglhjdfbqk); //问题管理环节的分布情况
      // this.$refs.slwtscreen.loadEchart(this.charwtgsslwtdfbqk,this.charwtdwslwtdfbqk); //三老问题
      this.$refs.sscmscreen.loadEchart(this.charwtwtsscmdfbqk); //所属层面
      this.$refs.zgwthjscreen.loadEchart(this.charwtgswtzgqk); //问题整改情况
      this.$refs.wtyzcdlbscreen.loadEchart(this.charwtwtyzcdlb); //是否主动暴露
      this.$refs.wtlbscreen.loadEchart(this.charwtwtlbdfbqk); //问题类别
    },
    //转化时间格式 例如：2019-06-19
    getTime(date) {
      var year = date.getFullYear();
      var month = (date.getMonth() + 1).toString();
      var day = date.getDate().toString();
      if (month.length == 1) {
        month = "0" + month;
      }
      if (day.length == 1) {
        day = "0" + day;
      }
      var dateTime = year + "-" + month + "-" + day;
      return dateTime;
    },
  },
  watch:{
    screenWidth(val){
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if(!this.timer){
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenWidth = val
          this.timer = true
          let that = this
          setTimeout(function(){
              // 打印screenWidth变化的值
              console.log(that.screenWidth)
              that.ScreenAdaptation()
              that.timer = false
          },400)
      }
    }
  },
  components: {
    glhjscreen,
    zylbscreen,
    slwtscreen,
    sscmscreen,
    zgwthjscreen,
    wtyzcdlbscreen,
    wtlbscreen,
    centerscreen,
  },
};
</script>
 
<style lang='less' scoped>
.topbingTitle {
  position: absolute;
  top: 20px;
  left: 600px;
  font-size: 16px;
  color: white;
}
.titleData {
  position: absolute;
  z-index: 99;
  margin: 0;
  font-size: 0;
  padding: 0;
  top: 73px;
  left: 20px;
}
.lookview {
  width: 1480px;
  height: 950px;
  background: url("../../assets/img/kanbj.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  min-width: 1480px;
}
// .lookview {
//   width: 100%;
//   background: url("../../assets/img/kanbj.png") no-repeat;
//   background-size: 100% auto;
// }
// .lookview:before {
//   content: "";
//   display: block;
//   padding-top: 100%;
// }
.wentiKantitle {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
  color: white;
}
.viewzylb {
  position: absolute;
  top: 21%;
  left: 20px;
}
.viewglhj {
    position: absolute;
    bottom: 10px;
    left: 382px;
}
.viewslwt {
  position: absolute;
  bottom: 0;
  left: 29%;
}
.viewsscm {
  position: absolute;
  bottom: 10px;
  left: 20px;
}
.viewzgwthj {
  position: absolute;
  bottom: 10px;
  right: 20px;
}

.viewwtyzcd {
  position: absolute;
  bottom: 10px;
  left: 745px;
}
.viewwtlb {
  position: absolute;
  right: 20px;
  top: 21%;
}
.viewcenter {
    width: 31%;
    height: 58%;
    padding: 100px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 19%;
    left: 417px;
    transform: scale(1.2);
}
/deep/.el-input__inner {
  background-color: #141d47;
  color: white;
}
/deep/.el-range-editor .el-range-input {
  background-color: #141d47;
  color: white;
}
/deep/.el-date-editor .el-range__icon {
  color: white;
}
/deep/.el-date-editor .el-range-separator {
  color: white;
}
/deep/.el-input.is-disabled .el-input__inner{
  background-color: #141d47;
}
.fangdasuo {
  position: fixed;
  right: 20px;
  bottom: 0;
  color: #0657c3;
  z-index: 99;
  width: 15.5%;
  font-size: 12px;
  opacity: 0.4;
  transition: all 0.4s;
}
.fangdasuo:hover {
  opacity: 1;
}
.transformOrigin{
  transform-origin: 0 0;
}
.borderBk{
    border: 1px solid #dadde2;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
}
.totoalheader{
    position: absolute;
    right: 20px;
    color: white;
    top: 8px;
}
.totoalheader ul li{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #141d47;
  border: 1px solid #DCDFE6;
  color: white;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 9px 15px;
  font-size: 14px;
  border-radius: 4px;
  margin-left: 10px;
}
    
</style>